<script setup lang="ts" name="BpmnProcessDrawer">
import BpmnProcessModelAddEdit from '../BpmnProcessModelAddEdit/index.vue'
import { getBpmnProcessSonListData } from '@/api/bpmnProcess'
const visible = ref(false)
const title = ref('')
const showDrawer = (v) => {
  console.log(v)
  visible.value = true
  title.value = v.name
  pageData.value.searchData.id = v.id
  getInitData()
}
// 子组件将方法暴露给父组件
defineExpose({ showDrawer })
const searchData: any = ref({
  id: 0,
  name: '',
  status: 1
})

const pageData: any = ref({
  listData: {
    total: 0,
    data: []
  },
  searchData: {
    id: 0,
    name: ''
  }
})
const pageIndex = ref(1)
const pageSize = ref(20)

// 页面数据条数改变重新获取数据
const handleSizeChange = (val: number) => {
  pageSize.value = val
  pageIndex.value = 1
  getInitData()
}
// 当前页改变重新获取数据
const handleCurrentChange = (val: number) => {
  pageIndex.value = val
  getInitData()
}
// 重置页面数据
const resetPageData = () => {
  pageData.value.listData.data = []
  pageData.value.listData.total = 0
}
// 获取当前查询条件下的数据
const getInitData = () => {
  resetPageData()
  const result: any = {}
  result.pageIndex = pageIndex.value
  result.pageSize = pageSize.value
  result.name = pageData.value.searchData.name
  getBpmnProcessSonListData(result, { config: { showLoading: false, mockEnable: true } }).then((res: any) => {
    console.log(res)
    if (res.data && res.data.length > 0) {
      setTimeout(() => {
        pageData.value.listData.data = res.data
        pageData.value.listData.total = res.total
      }, 1000)
    }
  })
}
// 查询条件重置
const resetSearch = () => {
  pageData.value.searchData.name = ''
  getInitData()
}

const BpmnProcessModelAddEditRef = ref(null)
// 新增事件
const add = () => {
  BpmnProcessModelAddEditRef.value.showDialog(null)
}

// 编辑事件
const edit = (item) => {
  BpmnProcessModelAddEditRef.value.showDialog(item)
}

// 复制事件
const copy = (item) => {
  BpmnProcessModelAddEditRef.value.showDialog(item)
}

const deleteRow = (v) => {
  const msg = '确定删除吗？'
  ElMessageBox.alert(msg, '警告', {
    showCancelButton: true,
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
    callback: (action) => {
      if (action === 'confirm') {
        ElMessage({
          type: 'info',
          message: `操作: 点击了确认`
        })
      } else {
        ElMessage({
          type: 'info',
          message: `操作: 点击了取消`
        })
      }
    }
  })
}
</script>

<template>
  <el-drawer class="flow-chart-drawer" v-model="visible" direction="rtl" size="60%">
    <template #header>
      <h2>
        流程模型列表
        <el-tag class="ml-10px">{{ title }}</el-tag>
      </h2>
    </template>
    <template #default>
      <el-form :inline="true">
        <el-form-item label="名称">
          <el-input v-model="searchData.name" placeholder="请输入名称" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="getInitData">查询</el-button>
          <el-button icon="Refresh" @click="resetSearch">重置</el-button>
          <el-button type="success" icon="Plus" @click="add()">新增</el-button>
        </el-form-item>
      </el-form>
      <div class="flex-1 table-layout">
        <div class="table-wrap">
          <el-table v-if="pageData.listData.data.length > 0" :data="pageData.listData.data" border :default-expand-all="false" row-key="id">
            <el-table-column prop="name" label="名称" />
            <el-table-column prop="process" label="流程引擎" />
            <el-table-column prop="status" label="状态" width="90" align="center">
              <template #default="scope">
                <el-tag :type="scope.row.status ? 'success' : 'info'">{{ scope.row.status ? '已部署' : '历史' }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="date" label="创建时间" width="180" />
            <el-table-column prop="operate" label="操作" width="200" align="center">
              <template #default="scope">
                <el-button type="primary" icon="Edit" @click="edit(scope.row)"></el-button>
                <el-button type="warning" icon="CopyDocument" @click="copy(scope.row)"></el-button>
                <el-button type="danger" icon="Delete" @click="deleteRow(scope.row)"></el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <el-pagination
        v-if="pageData.listData.total > 0"
        v-model:currentPage="pageIndex"
        v-model:page-size="pageSize"
        :page-sizes="[20, 40, 80, 120]"
        :background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageData.listData.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
      <BpmnProcessModelAddEdit ref="BpmnProcessModelAddEditRef"></BpmnProcessModelAddEdit>
    </template>
  </el-drawer>
</template>

<style lang="scss">
.flow-chart-drawer {

  .el-drawer__header {
    margin: 0;
    padding: 15px var(--el-space);
    border-bottom: 1px solid var(--el-border-color-extra-light);
  }

  .el-drawer__footer {
    margin: 0;
    padding: 15px var(--el-space);
  }

  .el-drawer__body {
    display: flex;
    flex-direction: column;
    padding: calc(var(--el-space) - 6px) var(--el-space) var(--el-space);
  }

  .el-pagination {
    align-items: center;
    justify-content: flex-end;
  }
}

.table-layout {
  position: relative;
  margin: calc(var(--el-space) - 6px) 0 0;

  .table-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    .el-table {
      width: 100%;
      height: 100%;
    }
  }
}

.el-pagination {
  align-items: center;
  justify-content: flex-end;
  margin: var(--el-space) 0 0;
}
</style>
